<template>
  <el-dialog title="选择人员" width="750px" :visible.sync="dialogFormVisible">
    <div class="container-item">
      <div class="left-column">
        <el-input v-model="organize" size="small" class="input-item" placeholder="请输入组织名称" @change="bindInputTap" />
        <el-menu style="margin-top: 10px;" :default-active="activeIndex" @select="handleSelect">
          <template v-for="item in organizations">
            <el-menu-item :index="item.orgIndexCode">
              <span slot="title">{{ item.orgName }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>

      <div class="right-column">
        <el-input v-model="name" size="small" class="input-item" placeholder="请输入姓名" @change="bindUserInfo(activeIndex)" />
        <el-table
          :data="staffInfo"
          v-loading="loading"
          size="small"
          stripe
          border
          height="280"
          style="width: 100%; margin-top: 10px;"
          highlight-current-row
          @current-change="handleCurrentChange">
          <el-table-column prop="personName" label="姓名"></el-table-column>
          <el-table-column prop="gender" label="性别">
            <span slot-scope="scope">{{ scope.row.gender == 1 ? '男' : '女' }}</span>
          </el-table-column>
          <el-table-column prop="orgPathName" label="所属组织"></el-table-column>
          <el-table-column prop="certificateNo" label="证件号码"></el-table-column>
        </el-table>
        <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData" />
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submitFormInfo">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import httpInterface from "../../../../util/httpInterface";
import Pagination from "../../Pagination";

export default {
  name: "SelectStaffInfo",
  components: {
    Pagination
  },
  data() {
    return {
      activeIndex: "",
      loading: false,
      dialogFormVisible: false,
      organize: "",
      name: "",
      staffInfo: [],
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      },
      currentRow: null,
      organizations: []
    }
  },

  mounted() {
    let { organizations } = this;
    if (organizations.length > 0) {
      this.activeIndex = organizations[0].orgIndexCode;
    }
  },

  methods: {
    pageNumData (page) {
      this.pageData.pageNum = Number(page);
      this.bindUserInfo(this.activeIndex);
    },

    pageSizeData (page) {
      this.pageData.pageSize = Number(page);
      this.bindUserInfo(this.activeIndex);
    },

    bindInputTap() {
      this.handleSelect();
    },

    show(thirdPartyId) {
      this.dialogFormVisible = true;
      this.organize = "";
      this.name = "";
      this.thirdPartyId = thirdPartyId;
      this.handleSelect();
    },

    handleCurrentChange(val) {
      this.currentRow = val;
    },

    handleSelect(key) {
      let _this = this;
      let { pageData } = this;
      let params = {
        orgName: this.organize,
        orgIndexCodes: key || "",
        pageNo: pageData.pageNum,
        pageSize: pageData.pageSize,
        thirdPartyId: this.thirdPartyId
      };
      httpInterface.requestPost(this, httpInterface.URL_ORG_LIST, params, function (res) {
        let data = res.data;
        if (data.success) {
          let { total, list } = data.other;
          if (list.length > 0) {
            _this.organizations = list;
            _this.pageData.total = total;
            _this.activeIndex = _this.organizations[0].orgIndexCode;
            _this.bindUserInfo(key || _this.activeIndex);
          } else {
            _this.staffInfo = [];
            _this.organizations = list;
          }
        } else {
          _this.errorMessage("组织数据加载失败")
        }
        _this.loading = false;
      }, null, false)
    },

    submitFormInfo() {
      this.dialogFormVisible = false;
      this.$emit("staffInfo", this.currentRow);
    },

    // 获取人员列表
    bindUserInfo(id) {
      this.loading = true;
      var _this = this;
      let { pageData, name, thirdPartyId } = this;
      var params = {
        pageSize: pageData.pageSize,
        pageNo: pageData.pageNum,
        orgIndexCode: id,
        personName: name || "",
        thirdPartyId: thirdPartyId
      };
      httpInterface.requestPost(this, httpInterface.URL_ORG_PERSON_LIST, params, function(response) {
        var data = response.data;
        if (data.success) {
          var { list, total } = data.other;
          _this.staffInfo = list;
          _this.pageData.total = total;
        } else {
          _this.errorMessage("人员数据加载失败")
        }
        _this.loading = false;
      }, null, false);
    },
  }
}
</script>

<style scoped lang="scss">
  .container-item{
    display: flex;

    .input-item{
      width: 160px;
    }

    .left-column{
      width: 25%;
      padding: 14px 0 0 20px;
    }

    .right-column{
      flex: 1;
      padding: 14px 20px;
      box-sizing: border-box;
      background-color: #f8f8f8;
    }
  }

  .el-dialog__wrapper >>> .el-dialog .el-dialog__body {
    padding: 0px !important;
  }

  .page-top{
    margin: 10px 0;
  }

  .page-top >>> .el-pagination.is-background{
    padding: 0;
  }

  .page-top >>> .el-pagination .el-pagination__sizes{
    margin-right: 0;
  }

  .el-menu >>> .is-active {
    background: #ecf5ff;
    border-right: 2px solid #4698fa;
  }
</style>
